<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏作业矫正</title>
		
		<style>
		.ul-sidebar{
			font: 16px"宋体";
			/*去掉无序列表样式  针对一项列表项标记*/
			list-sty  le-type: none;
			/*去掉无序列表样式  针对三项①列表项标记list-style-type
			                          ②列表项位置list-style-position
									  ③列表项图片list-style-imge
									  所有的效果，去掉样式
									  */
			list-style: none;
			/*去掉内外边距：ul  li存在外边距*/
			margin: 0;
			padding: 0;
			
		}	
		
		     aside{
				 width: 255px;
				 height: 530px;
				 background: #ffeafe;
				 /* 盒子模型：外边距 */

				 
			 }
			 aside ul.ul-sidebar li{
				 width: 235px;
				 height: 50px;
				 text-align: left;			
				 line-height: 50px;
				 /*挂靠位【固定】 使用相对定位*/
				 position: relative;
				 top: 15px;
			 }
			 
			 aside ul.ul-sidebar li:hover{
				 background: #cbfff5;
			
			 }
			/*挂靠点【活动的】 使用绝对定位，按照父级位置定位*/
			aside ul.ul-sidebar div.out{
				width: 500px;
				height: 460px;
				border: 1px solid black;
				/*绝对定位*/
				position: absolute;
				left: 293px;
				/* 默认隐藏   (jOuery才能)*/
				display: none;
				
			}
			
		/* 新增样式： 大于号 ——右侧撑大效果 */
		aside ul.ul-sidebar li span{
			float: right;
			padding-right: 20px;
			
			
			
			pos ition: absolute;
			lef t: 200px;
		}
		
		
		/* 新增样式 */
		aside ul.ul-sidebar li{
			padding-left: 20px;
		}
		
		</style>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html结构：外层有一个div（.sidebar）
		     html结构标记：aside元素， 表示左栏、侧边栏、广告
			               有利于SEO优化
			              通常代替div+id/class 
		
		
		              内层ul.ul-sidebar  li*10 (内容参照京东)
			css结构：内部引入方式
					加通配选择器----合理添加
					外层aside宽高235*460  背景色自定
					内层每一个li加宽高235*46
					内层文本垂直居中对齐，文字：16px
					鼠标移动上去有背景色改变
					
					-->
		<aside>
			<ul class="ul-sidebar">
				<!-- 弹出框，模式：div+别名 -->
				<div class="out"></div>
			    <li>手机 平板 电话卡 <span>></span></li>
			    <li>电视 盒子 <span>></span></li>
			    <li>路由器 智能硬件 <span>></span></li>
			    <li>移动电源 插线板 <span>></span></li>
			    <li>耳机 音箱 <span>></span></li>
			    <li>电池 存储卡 <span>></span></li>
			    <li>保护套 后盖 <span>></span></li>
			    <li>贴膜 其他配件 <span>></span></li>
			    <li>米兔 服装 <span>></span></li>
			    <li>箱包 其他周边 <span>></span></li>
			</ul>
		</aside>
		<script>
			/* 左栏实现：1.添加事件 2.切换效果 3.切换效果*/
			$("aside ul.ul-sidebar li").hover(function(){
				//弹出框 默认隐藏--抓弹出框  第一件事  显示  
				$("aside ul.ul-sidebar div.out").css("display","block");
			},function(){
				
			$("aside ul.ul-sidebar div.out").css("display","none");
			});
			
		</script>
	</body>
</html>

<!-- css   悬停效果     效果不能实现：不能切换
     jq    悬停效果事件源   hover   能解决切换效果问题
     语法：$("选择器").hover(function(){第一件事}，function(){第二件事});
 
 -->